<template>
  <div class="home-container">
    <!-- 头部搜索和轮播图 -->
    <div class="header_search_box">
      <!-- 输入框 -->
      <van-search
        v-model="value"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- 轮播图
       -->
      <div class="swiper_box">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image.fspPicurl" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 数量统计模块 -->
    <section class="liulan_box">
      <div>
        <span class="icon_liulan liu_img"
          ><img
            src="https://www.xcxybbs.cn/source/plugin/tom_tcershou/images/data.gif"
            alt=""
          />
        </span>
        <span class="icon_liulan"
          >闲置物品：<span class="num">{{ goodslenth }}</span></span
        >
        <span class="icon_liulan"
          >求购物品：<span class="num">{{ needslenth }}</span></span
        >
        <span class="icon_liulan"
          >成交：<span class="num">{{ cjlenth }}</span></span
        >
      </div>
    </section>
    <!-- 商品分类 -->
    <section class="nav_box">
      <van-grid square :border="false" :column-num="5">
        <van-grid-item
          v-for="item in cateLists"
          :key="item.cateId"
          @click="toUrlcate(item.cateId)"
          :icon="item.catePicurl"
          :text="item.cateName"
        />
      </van-grid>
    </section>
    <!-- 通知栏 -->
    <section class="noticebar_box">
      <van-notice-bar
        left-icon="http://r.photo.store.qq.com/psc?/V52eC8XA0zvIzo3ZC9ch0BpIJX3HA3ZP/TmEUgtj9EK6.7V8ajmQrEEuGHldgVQsNtm5Jdtxm9JVbZN2MSTeyIWLXnJYeqrCPWgdsRddYjQbKmRpZ8ltGv3Nt7w5qakqzlJ4enfHoZ9Y!/r"
        :scrollable="false"
        background="#fff"
      >
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item>内容 1</van-swipe-item>
          <van-swipe-item>内容 2</van-swipe-item>
          <van-swipe-item>内容 3</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
import { Toast } from "vant";
import { Notify } from "vant";
Vue.use(Toast);
Vue.use(Lazyload);
export default {
  name: "ToutiaoHome",

  components: {},

  directives: {},

  data() {
    return {
      // 输入框的值
      value: "",
      // 轮播图片
      images: [],
      cateLists: [],
      show: false,
      goodslenth: "",
      needslenth: "",
      cjlenth: "",
    };
  },

  mounted() {},
  created() {
    if (localStorage.getItem("id")) {
      if (localStorage.getItem("imgpic")) {
        this.images = JSON.parse(localStorage.getItem("imgpic"));
      } else {
        this.getfocusList();
      }
      if (localStorage.getItem("CateList")) {
        this.cateLists = JSON.parse(localStorage.getItem("CateList"));
      } else {
        this.getCateList();
      }
      this.getAllGoods();

      this.getAllneeds();
      this.cjGoods();
    } else {
      Notify({ type: "danger", message: "请登录" });
      this.$router.push({ name: "my" });
    }
  },
  methods: {
    onSearch() {},
    // 获取全部轮播图
    async getfocusList() {
      // this.cateLi = true;
      const { data: res } = await this.$http.get("/api/focuspic/all");
      //console.log(res);
      this.images = res.data;
      localStorage.setItem("imgpic", JSON.stringify(this.images));
    },
    // 所有分类
    async getCateList() {
      this.cateLi = true;
      const { data: res } = await this.$http.get("/api/cate/all");
      //console.log(res);
      this.cateLists = res.data;
      localStorage.setItem("CateList", JSON.stringify(this.cateLists));
    },
    // 获取商品列表
    async getAllGoods() {
      let data = {
        finish: 0,
        status: 1,
      };
      const { data: res } = await this.$http.get("/api/goods/list", {
        params: data,
      });
      this.goodslenth = res.data.length;
    },
    // 获取求购列表
    async getAllneeds() {
      let data = {
        finish: 0,
        status: 1,
      };
      const { data: res } = await this.$http.get("/api/needs/list", {
        params: data,
      });
      this.needslenth = res.data.length;
    },
    // 获取成交列表
    async cjGoods() {
      let data = {
        finish: 1,
        status: 1,
      };
      const { data: res } = await this.$http.get("/api/goods/list", {
        params: data,
      });
      this.cjlenth = res.data.length;
    },
    toUrlcate(id) {
      localStorage.removeItem("goodsList");
      this.$router.push({ name: "goods", params: { id: id } });
    },
  },
};
</script>

<style lang="less" scoped>
.header_search_box {
  width: 100%;
  background-color: rgb(255, 255, 255);
}
.swiper_box {
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  // margin: 0px 10px;
  border-radius: 10px;
  overflow: hidden;
}
.van-swipe {
  width: 100%;
  height: 200px;
  border-radius: 10px;

  img {
    width: 100%;
    height: 200px;
    border-radius: 10px;
  }
}
.liulan_box {
  height: 41px;
  padding: 4px 5px;
  background-color: #fff;
  text-align: left;
  line-height: 33px;
  font-size: 12px;
  .icon_liulan {
    padding-left: 15px;
    .num {
      color: red;
    }
  }
}
.liu_img {
  width: 20px;
  height: 20px;
  img {
    width: 20px;
    height: 18px;
    // vertical-align: top;
  }
}
.nav_box {
  background-color: #fff;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.noticebar_box {
  padding: 10px 0px;
  .van-swipe {
    margin-left: 5px;
  }
}
</style>